2013 was the year of responsive design. And 2014 too.

There are many html5/css3 frameworks which provide components, css classes, js libraries etc... that you can use to speed up the process of creating a good and responsive web interface.

There is a sort of vacuum indeed, when dealing with html tables. Do not get me wrong, this is not a fault of the frontend frameworks, but it is an intrinsic problem, due to the nature of tables. The main problem appears when in some cells we have a content with long words, like for examples filenames, which can't be  automatically wrapped.

Actually some frameworks provides responsive tables, like Zimit Framework.  

But being honest, I really dislike the result. I think it is a bit confusing. Basically the table is transformed in a 2 columns table, where the column headers become row headers (the first column) while the second column contains the nth row values, and such structure is repeated n times, foreach row of the original table, covering all the table values.

Well, I prefer another approach, which can be achieved with simple hidden-type css classes.

Let's see how you can obtain a sort of responsive table with bootstrap. Imagine we have a 3 columns table, and we want it to be a 1 column table for extra small devices without loosing information. The only possibility we have is to show the 2nd and 3rd column values inside the first column, and hide the columns (but only for extra-small devices!). So here is how we can achieve this result.

<table class="table table-striped table-hovered">
  <caption>My caption</caption>
  <thead>
    <tr>
      <th>First column header</th>
      <th class="hidden-xs">Second column header</th>
      <th class="hidden-xs">Third column header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img class="pull-left" style="margin-right: 8px;" src="/path/to/img.png" alt="image" />
        <p>Some text for the first column</p>
        <p class="visible-xs">Some text for the second column</p>
        <p class="visible-xs">Some text for the third column</p>
      </td>
      <td class="hidden-xs>Some text for the second column</td>
      <td class="hidden-xs">Some text for the third column</td>
    </tr>
    <!-- more rows here -->
  </tbody>
</table>

The idea is quite easy, we just hide the 2nd and 3rd columns for extra-small devices showing instead the columns information inside the first one. When the device width exceeds our xs limit instead the columns are shown and the information inside the first column are hidden.

Nothing special, sure, but it is an approach I prefer when dealing with responsive tables.